<template>
    <div style="display: inline-block">
        <el-card style="width: 300px; height: 300px; margin: 10px">
            <template #header>测试图片</template>
            <client-only>
                <el-image
                    :src="src"
                    style="width: 100%; height: 170px"
                    lazy
                />
                <template #fallback>
                    <div
                        class="image-slot"
                        style="width: 100%; height: 170px"
                    >
                        <el-icon><Picture /></el-icon>
                    </div>
                </template>
            </client-only>
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { Picture } from '@element-plus/icons-vue';
    defineProps({
        src: {
            type: String,
            default: '',
        },
    });
</script>

<style lang="scss" scoped>
    .image-slot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 30px;
        color: var(--el-text-color-secondary);
        background: var(--el-fill-color-light);
    }
</style>
